<template>
  <div class="app-container">
    <div class="formatList">
      <el-form ref="form"  :model="form" label-width="150px" :rules="rules">
        <el-row>
          <el-col :span="24">
            <el-form-item label="商户名称" prop="shop_id">
              <!-- <span>美美咖自营</span> -->
              <el-select v-model="form.shop_id" @change="handleChange1">
                <el-option
                  v-for="(item,index) in mmkShopList"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="PLUS会员卡名称" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="会员卡描述" prop="desc">
              <el-input v-model="form.desc" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="会员卡原价" prop="origin_price">
              <el-input v-model="form.origin_price" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="会员卡售价" prop="sale_price">
              <el-input v-model="form.sale_price" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="成本价" prop="cost_price">
              <el-input v-model="form.cost_price" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="服务费" prop="service_price">
              <el-input v-model="form.service_price" />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="购买须知" prop="purchase_note">
              <Tinymce v-model="form.purchase_note" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="divBar" />
        <!-- 购买须知 -->
        <h5 class="titleInfo">会员卡内容</h5>
        <el-row>
          <!-- 平台卡券 -->
          <el-col :span="20">
            <el-col :span="4">
              <el-form-item label="平台卡券" prop="goods_ticket_ids">
                <el-col :span="4">
                  <el-button type="text" @click="addCoupons">添加优惠券</el-button>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="可领取数量" prop="goods_tickets_num">
                <el-input size="mini" v-model.number="form.goods_tickets_num"  />
              </el-form-item>
            </el-col>
          </el-col>
          <div class="listDiv">
            <el-table ref="tableData" :data="tableData" style="width: 100%">
              <el-table-column prop="ticket_type" label="优惠券类型" align="center" />
              <el-table-column prop="scope" label="适用范围" align="center" />
              <el-table-column prop="type_name" label="优惠券名称" align="center" />
              <el-table-column prop="available" label="优惠券对应商品" align="center" />
              <el-table-column prop="type_money" label="优惠券金额" align="center" />
              <el-table-column prop="status" label="有效期" align="center">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.start_ticket_time&&scope.row.end_ticket_time"
                  >{{ scope.row.start_ticket_time+' 至 '+scope.row.end_ticket_time }}</span>
                  <span v-else />
                </template>
              </el-table-column>
              <el-table-column prop="num" label="数量" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.num=1 }}</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="50" align="center">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="deleteGood(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 医美卡券 -->
          <el-col :span="20">
            <el-col :span="4">
              <el-form-item label="医美卡券" prop="beauty_ticket_ids" >
                <el-col :span="4">
                  <el-button type="text" @click="addHospital">添加优惠券</el-button>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="可领取数量" prop="beauty_tickets_num">
                <el-input size="mini" v-model.number="form.beauty_tickets_num"  />
              </el-form-item>
            </el-col>
          </el-col>
          <div class="listDiv">
            <el-table ref="tableData1" :data="tableData1" style="width: 100%">
              <el-table-column prop="ticket_type" label="优惠券类型" align="center" />
              <el-table-column prop="hospital_name" label="适用范围" align="center" />
              <el-table-column prop="type_name" label="优惠券名称" align="center" />
              <el-table-column prop="project_name" label="优惠券对应项目" align="center" />
              <el-table-column prop="status" label="有效期" align="center">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.start_ticket_time&&scope.row.end_ticket_time"
                  >{{ scope.row.start_ticket_time+' 至 '+scope.row.end_ticket_time }}</span>
                  <span v-else />
                </template>
              </el-table-column>
              <el-table-column prop="num1" label="数量" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.num1=1 }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 自营商品 -->
          <el-col :span="20">
            <el-form-item label="自营商品" prop="goods_info" class="mt_20">
              <el-col :span="4">
                <el-button type="text" @click="addProduct">添加商品</el-button>
              </el-col>
            </el-form-item>
          </el-col>
          <div class="listDiv">
            <el-table :data="form.goods_info" style="width: 100%">
              <el-table-column prop="good_name" label="商品名称" align="center" />
              <!-- <el-table-column prop="good_spec_name" label="规格" align="center" /> -->
              <el-table-column prop="price" label="单价" align="center" />
              <el-table-column prop="num" label="数量" align="center" />
              <el-table-column  label="操作"  align="center">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="handleDelete(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-button type="primary" class="mt_20 left" @click="submitFn('form')">提交</el-button>
        </el-row>
      </el-form>
    </div>
    <!-- 添加平台卡券弹窗 -->
    <el-dialog title="添加优惠券" :visible.sync="dialogFormVisible" width="1200px" @close="clear">
      <el-form ref="formShop" :inline="true" :model="formShop" label-width="150px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="抵扣券" prop="coupons">
              <!-- <el-input v-model="formShop.coupons" /> -->
              <el-select v-model="formShop.coupons" placeholder="抵扣券">
                <el-option
                  v-for="(item,index) in couponsType"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="优惠券名称">
              <el-input v-model="formShop.keyword" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--  @row-click="handleCurrentsChange" -->
      <div v-loading="tableLoading" class="listDiv">
        <el-table
          ref="tableData2"
          :data="tableData2"
          style="width: 100%"
          :row-key="getRowKeys"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
          <el-table-column fixed type="index" label="序号" width="50" align="center" />
          <el-table-column prop="source" label="优惠券类型" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.source | sourceType }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="type_name" label="优惠券名称" align="center" />
          <el-table-column prop="type_money" label="优惠券金额" align="center" />
        </el-table>
        <!-- 分页 -->
        <div class="pagesCon">
          <div>
            <el-pagination
              :current-page="formShop.page"
              :page-sizes="page_sizes"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page_totals"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <!-- 提交按钮 -->
        <el-button type="primary" @click="submitGoods">确认</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 医美卡券 -->
    <el-dialog title="添加优惠券" :visible.sync="addHospitalVisible" width="1200px" @close="clear1">
      <el-form ref="formBeauty" :inline="true" :model="formBeauty" label-width="150px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="体验券" prop="coupons">
              <el-select v-model="formBeauty.coupons" placeholder="体验券">
                <el-option
                  v-for="(item,index) in couponsType"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="优惠券名称">
              <el-input v-model="formBeauty.keyword" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button type="primary" @click="handleSearch1">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-loading="tableLoading" class="listDiv">
        <el-table ref="tableData3" :data="tableData3" style="width: 100%" :row-key="getRowKeys1">
          <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
          <el-table-column fixed type="index" label="序号" width="50" align="center" />
          <el-table-column prop="source" label="优惠券类型" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.source | sourceType }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="type_name" label="优惠券名称" align="center" />
          <el-table-column prop="hospital_name" label="适用范围" align="center" />
        </el-table>
        <!-- 分页 -->
        <div class="pagesCon">
          <div>
            <el-pagination
              :current-page="formBeauty.page"
              :page-sizes="page_sizes1"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page_totals1"
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
            />
          </div>
        </div>
        <!-- 提交按钮 -->
        <el-button type="primary" @click="submitBeauty">确认</el-button>
        <el-button type="primary" @click="addHospitalVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 添加商品弹窗 -->
    <el-dialog title="添加商品" :visible.sync="addVisibleProduct" width="468px" @close="clear2">
      <el-form ref="formProduct" :inline="true" :model="formProduct" label-width="150px">
        <el-row>
          <el-col :span="24">
            <el-form-item prop="keyword" label="选择商品">
              <el-select v-model="formProduct.keyword" filterable >
                <el-option
                  v-for="(item,index) in options"
                  :key="index"
                  :label="item.title"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item prop="spec" label="选择规格">
              <el-select v-model="formProduct.spec" filterable @change="changeSpecs">
                <el-option
                  v-for="item in specList"
                  :key="item.id"
                  :label="item.spec_id_item_name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item prop="count" label="填写数量">
              <el-input v-model="formProduct.count" type="number" />
            </el-form-item>
          </el-col>
          <el-form-item label=" ">
            <el-button type="primary" @click="confirm" >确认</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import Tinymce from "@/components/NewTinymce";
import {
  submitAdd,
  shopCoupons,
  tableGoods,
  beautyCoupons,
  tableBeauty,
  dealerShop,
  changeSpec,
  getShop
} from "@/api/plusMange";
export default {
  name: "PlusListAdd",
  components: { Tinymce },
  filters: {
    sourceType(e) {
      switch (e) {
        case 1:
          return "新人大礼包";
          break;
        case 2:
          return "抵扣券";
          break;
        case 3:
          return "体验券";
          break;
        default:
          // return "暂无";
          break;
      }
    }
  },
  watch: {
    "form.purchase_note"(val) {
      if (val) {
        this.$refs.form.clearValidate("purchase_note");
      } else {
        this.$refs.form.validateField("purchase_note");
      }
    }
  },
  data() {
    // 购买须知
    const ddd = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入购买须知"));
      } else {
        return callback();
      }
    };
    // 原价
    const originPrice = (rule, value, callback) => {
      let reg = /^\d{1,}$/;
      if (!value) {
        return callback(new Error("请输入会员卡原价"));
      } else if (!reg.test(value)) {
        return callback(new Error("请输入正确的数字"));
      } else if (Number(value) > 360) {
        callback();
      } else {
        return callback(new Error("请输入正确的金额"));
      }
    };
    // 售价
    const priceReg = (rule, value, callback) => {
      let reg = /^\d{1,}$/;
      if (!value) {
        return callback(new Error("请输入会员卡售价"));
      } else if (!reg.test(value)) {
        return callback(new Error("请输入正确的数字"));
      } else if (Number(value) < 1 || Number(value) > 2000) {
                return callback(new Error("PLUS会员卡定价 1 - 2000"));
      } else if (
        this.form.origin_price &&
        Number(value) >= Number(this.form.origin_price)
      ) {
        return callback(new Error("会员卡原价须大于售价"));
      } else {
        callback();
      }
    };
    //成本价
    const costPriceReg = (rule, value, callback) => {
      let reg = /^[0-9]*([.][0-9]{1,2})?$/;
      if (!value) {
        return callback(new Error("请输入成本价"));
      } else if (!reg.test(value)) {
        return callback(new Error("请输入整数或两位内小数"));
      }  else if (
        this.form.sale_price &&
        Number(value) > Number(this.form.sale_price)
      ) {
        return callback(new Error("成本价不允许高于会员卡售价"));
      } else {
        callback();
      }
    };
    // 服务费
    const sericeFee = (rule, value, callback) => {
      let reg = /^\d{1,}$/;
      if (!value) {
        return callback(new Error("请输入服务费"));
      } else if (!reg.test(value)) {
        return callback(new Error("请输入正确的数字"));
      } else {
        return callback();
      }
    };
    //平台数量验证
    const goodsNum = (rule, value, callback) => {
      let reg = /^\d{1,}$/;
      if (!value) {
        return callback(new Error("请输入可领取数量"));
      } else if (!reg.test(value)) {
        return callback(new Error("请输入正确的数字"));
      } else if(this.form.goods_ticket_ids ==''){
        return callback(new Error("请先选择平台卡券"));
      }else if( Number(value)>this.form.goods_ticket_ids.length){
        return callback(new Error("可领取数量不大于已添加卡券数量"));
      }else {
        return callback();
      }
    };
    //医美数量验证
    const beautyNum = (rule, value, callback) => {
      let reg = /^\d{1,}$/;
      if (!value) {
        return callback(new Error("请输入可领取数量"));
      } else if (!reg.test(value)) {
        return callback(new Error("请输入正确的数字"));
      } else if(this.form.beauty_ticket_ids ==''){
        return callback(new Error("请先选择医美卡券"));
      }else if( Number(value)>this.form.beauty_ticket_ids.length){
        return callback(new Error("可领取数量不大于已添加卡券数量"));
      }else {
        return callback();
      }
    };

    return {
      mmkShopList: [],
      form: {
        shop_id: "",
        name: "",
        desc: "",
        origin_price: "",
        sale_price: "",
        cost_price:'',
        service_price: "",
        purchase_note: "",
        goods_info: [],
        goods_ticket_ids: "",
        beauty_ticket_ids: "",
        beauty_tickets_num: "",
        goods_tickets_num: "",
      },
      tableData: [], // 平台
      tableData1: [], // 医美
      dialogFormVisible: false, // 平台卡券弹窗
      addHospitalVisible: false, // 医美卡券弹窗
      formShop: {
        keyword: "",
        page: 1,
        size: 10
      }, // 平台弹窗表单
      formBeauty: {
        keyword: "",
        page: 1,
        size: 10
      },
      // 平台
      page_sizes: [10, 30, 50, 100], // 每页显示个数
      page_totals: 60, // 总条目数
      // 优惠券类型
      couponsType: [],
      tableData2: [], // 平台弹窗列表
      tableData3: [], // 医美弹窗列表
      // 医美
      page_sizes1: [10, 30, 50, 100], // 每页显示个数
      page_totals1: 60, // 总条目数,
      tableData4: [], // 商品列表
      addVisibleProduct: false, // 添加商品弹窗
      formProduct: {
        keyword: "",
        // spec: "",
        count: ""
      }, // 添加商品表单
      options: [], // 选择商品下拉列表
      specList: [], // 选择规格下拉列表
      tableLoading: true,
      multipleSelection: [],
      // 提交表单验证规则
      rules: {
        name: [
          {
            required: true,
            message: "请输入模板名称",
            trigger: "blur"
          }
        ],
        desc: [
          {
            required: true,
            message: "您有内容未填写，请填写后再次提交审核",
            trigger: "blur"
          }
        ],
        origin_price: [
          {
            required: true,
            validator: originPrice,
            trigger: "blur"
          }
        ],
        sale_price: [
          {
            required: true,
            validator: priceReg,
            trigger: "blur"
          }
        ],
        cost_price: [
          {
            required: true,
            validator: costPriceReg,
            trigger: "blur"
          }
        ],
        service_price: [
          {
            required: true,
            validator: sericeFee,
            trigger: "blur"
          }
        ],
        purchase_note: [
          {
            required: true,
            validator: ddd,
            trigger: "blur"
          }
        ],
        goods_tickets_num:[
          {
            required: true,
            validator: goodsNum,
            trigger: "blur"
          }
        ],
        beauty_tickets_num:[
          {
            required: true,
            validator: beautyNum,
            trigger: "blur"
          }
        ],
        goods_ticket_ids: [
          {
            required: true,
            message: "请选择平台卡券",
            trigger: "blur"
          }
        ],
        beauty_ticket_ids: [
          {
            required: true,
            message: "请选择医美卡券",
            trigger: "blur"
          }
        ],
        shop_id: [
          {
            required: true,
            message: "请选择商户名称",
            trigger: "change"
          }
        ]
      }
    };
  },
  inject: ["reload"],
  mounted() {
    this.dealerSelect(this.formProduct);
    this.getName();
  },
  methods: {
    getName() {
      getShop()
        .then(res => {
          if (res.data.code == 200) {
            let arr = [];
            res.data.data.forEach(e => {
              arr.push({
                value: e.id,
                name: e.name
              });
            });
            this.mmkShopList = arr;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err.msg);
        });
    },
    handleChange1(e) {
      this.form.shop_id = e;
    },
    // 添加平台优惠券
    addCoupons() {
      this.dialogFormVisible = true;
      this.addShopList(this.formShop);
    },
    // 平台弹窗列表
    addShopList(e) {
      shopCoupons(e)
        .then(res => {
          if (res.data.code == 200) {
            this.tableData2 = res.data.data;
            // this.toggleSelection([...this.tableData2]);
            this.page_totals = res.data.meta.total;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
          this.tableLoading = false;
        })
        .catch(err => {
          this.tableLoading = false;
          this.errorStatus(err.msg);
        });
    },
    // 添加医美卡券
    addHospital() {
      this.addHospitalVisible = true;
      this.addBeauty(this.formBeauty);
    },
    // 医美弹窗列表
    addBeauty(e) {
      beautyCoupons(e)
        .then(res => {
          if (res.data.code == 200) {
            this.tableData3 = res.data.data;
            this.page_totals1 = res.data.meta.total;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
          this.tableLoading = false;
        })
        .catch(err => {
          this.tableLoading = false;
          this.errorStatus(err.msg);
        });
    },
    // 平台查询清空
    clear() {
      this.dialogFormVisible = false;
      this.formShop = {
        keyword: "",
        page: 1,
        size: 10
      };
      this.$refs.tableData2.clearSelection();
    },
    // 医美查询清空
    clear1() {
      this.addHospitalVisible = false;
      this.formBeauty = {
        keyword: "",
        page: 1,
        size: 10
      };
      this.$refs.tableData3.clearSelection();
    },
    getRowKeys(row) {
      return row.id;
    },
    // 平台确认勾选
    submitGoods() {
      const selectData = this.$refs.tableData2.selection;
      const id = [];
      selectData.forEach(e => {
        id.push(e.id);
      });
      // console.log("id", id);
      this.form.goods_ticket_ids = id;
      if (this.form.goods_ticket_ids.length > 0) {
        this.goodsTable({
          goods_ticket_ids: JSON.stringify(this.form.goods_ticket_ids)
        });
      }
      this.$refs.form.validateField("goods_ticket_ids");
      this.$refs.tableData2.clearSelection();
      this.$refs.form.validateField("goods_tickets_num");
      this.dialogFormVisible = false;
    },
    // 平台
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 平台卡券列表
    goodsTable(e) {
      tableGoods(e)
        .then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            // this.tableData = [...this.tableData, ...res.data.data];
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err.msg);
        });
    },
    // 平台查询
    handleSearch() {
      this.formShop.page = 1;
      this.addShopList(this.formShop);
    },
    getRowKeys1(row) {
      return row.id;
    },
    // 医美确认勾选
    submitBeauty() {
      const selectData = this.$refs.tableData3.selection;
      const arr = [];
      selectData.forEach(e => {
        arr.push(e.id);
      });
      // console.log("arr", arr);
      this.form.beauty_ticket_ids = arr;
      this.beautyTables({
        beauty_ticket_ids: JSON.stringify(this.form.beauty_ticket_ids)
      });
      this.$refs.tableData3.clearSelection();
      this.addHospitalVisible = false;
      this.$refs.form.validateField("beauty_ticket_ids");
      this.$refs.form.validateField("beauty_tickets_num");
    },
    // 医美列表
    beautyTables(e) {
      tableBeauty(e)
        .then(res => {
          if (res.data.code == 200) {
            this.tableData1 = res.data.data;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err.msg);
        });
    },
    // 医美查询
    handleSearch1() {
      this.formBeauty.page = 1;
      this.addBeauty(this.formBeauty);
    },
    //  添加商品
    addProduct() {
      this.addVisibleProduct = true;
      this.dealerSelect(this.formProduct);
    },
    // 自营商品下拉表
    dealerSelect(e) {
      dealerShop(e)
        .then(res => {
          if (res.data.code == 200) {
            let resData = res.data.data;
            let arr = [];
            resData.forEach(e => {
              arr.push({
                value: e.id,
                title: e.title,
                price: e.price
              });
            });
            this.options = arr;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err.msg);
        });
    },
    // 自营弹窗确认
    confirm() {
      let goodsId = this.options.find(e => {
        return e.value == this.formProduct.keyword;
      });
      let datas = {
        good_id: this.formProduct.keyword,
        good_name: goodsId.title,
        price: goodsId.price,
        num: this.formProduct.count,
      };
      if(this.formProduct.keyword && this.formProduct.count){
        this.form.goods_info.push(datas);
      }
      this.addVisibleProduct = false;
    },
    // 提交
    submitFn(e) {
      this.$refs[e].validate(valid => {
        const datas = {
          shop_id: this.form.shop_id,
          name: this.form.name,
          desc: this.form.desc,
          origin_price: this.form.origin_price,
          sale_price: this.form.sale_price,
          cost_price: this.form.cost_price,
          service_price: this.form.service_price,
          purchase_note: this.form.purchase_note,
          goods_info: JSON.stringify(this.form.goods_info),
          goods_ticket_ids: JSON.stringify(this.form.goods_ticket_ids),
          beauty_ticket_ids: JSON.stringify(this.form.beauty_ticket_ids),
          goods_tickets_num: this.form.goods_tickets_num,
          beauty_tickets_num: this.form.beauty_tickets_num
        };
        if (
          Boolean(this.form.goods_ticket_ids) ||
          Boolean(this.form.beauty_ticket_ids)
        ) {
          if (valid) {
            this.addCard(datas);
          } else {
            this.$message({
              message: "有必填项没填，不能提交咯",
              type: "warning"
            });
          }
        } else {
          this.$message({
            message: "有必填项没填，不能提交咯",
            type: "warning"
          });
        }
      });
    },
    // 确认提交
    addCard(e) {
      submitAdd(e)
        .then(res => {
          if (res.data.code == 200) {
            this.succStatus("添加成功");
            this.$router.push("/plusList");
            this.reload();
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err.msg);
        });
    },
    // 平台删除
    deleteGood(e) {
      this.tableData.splice(e, 1);
      let arr = [];
      this.tableData.forEach(e => {
        arr.push(e.id);
      });
      this.form.goods_ticket_ids = arr;
    },
    // 自营商品删除
    handleDelete(e) {
      this.form.goods_info.splice(e, 1);
    },
    clear2() {
      this.addVisibleProduct = false;
      this.formProduct = {
        keyword: "",
        spec: "",
        count: ""
      };
    },
    // 每页显示条数
    handleSizeChange(val) {
      this.formShop.size = val;
      this.addShopList(this.formShop);
    },
    // 当前页
    handleCurrentChange(val) {
      this.formShop.page = val;
      this.addShopList(this.formShop);
    },
    // 添加医美
    // 每页显示条数
    handleSizeChange1(val) {
      this.formBeauty.size = val;
      this.addBeauty(this.formBeauty);
    },
    // 当前页
    handleCurrentChange1(val) {
      this.formBeauty.page = val;
      this.addBeauty(this.formBeauty);
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      });
    },
    // 成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, "success");
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 0px 20px !important;
}
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
.mt_20 {
  margin-top: 20px;
}
.left{
  margin-left: 180px;

}
.listDiv{
  margin-bottom: 10px;
}
/* 分页样式 */
.pagesCon {
  margin-top: 20px;
  text-align: right;
}
.formatList {
  padding: 20px 0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type="number"]{
    -moz-appearance: textfield;
}
</style>
